import React, { Component } from 'react';
import styles from './Stastic.less';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 使用样式
import 'echarts/theme/macarons';

import ChartBox from './ChartBox';

export default class UserImage extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('charts_user_img'), 'macarons');
    // 绘制图表
    myChart.setOption({
      title: { text: 'ECharts 入门示例' },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  }
  getEchartsOfUserImage() {
    return <div id="charts_user_img" className={styles.followUpCharts} />;
  }

  render() {
    return (
      <ChartBox
        className={styles.chartDivider}
        title="用户画像"
        content={this.getEchartsOfUserImage()}
      />
    );
  }
}
